const path = require('path')
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //入口
    entry: './src/main.js',
    //输出
    output: {
        //path 绝对路径 filename 文件名
        //--dirname nodejs 的变量，代表当前文件的文件目录

        path:path.resolve(__dirname,'../dist'),
        filename: "static/js/main.js",
        //自动清空上一次打包结果
        clean:true
    },
    // module:  {
    //     //
    //     rules:[
    //         {
    //             test:'/\.css$/',
    //             use:[
    //                 'style-loader',
    //                 'css-loader'
    //             ],
    //         }
    //     ]
    // },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/i,
                use: ["style-loader", "css-loader","less-loader"],
            },
            {
                test: /\.s[ac]ss$/i,
                use: ["style-loader", "css-loader","sass-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|svg|webp)$/i,
                type: 'asset',
                parser: {
                    dataUrlCondition:{
                        //小于10kb的图片转成base64
                        //优点：减少请求数量 缺点：体积会更大
                        maxSize:10 * 1024
                    },
                    generator:{
                        //输出图片名称
                        //【hash：10】哈希值取前十位
                        filename:'static/images/[hash:10][ext][query]'
                    },

                }
            },
            {
                test: /\.(ttf|woff?2|map3|avi )$/i,
                type: 'asset/resource',
                parser: {
                    generator:{
                        //输出图片名称
                        //【hash：10】哈希值取前十位
                        filename:'static/media/[hash:10][ext][query]'
                    },

                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,//排除
                use: {
                    loader: 'babel-loader',
                    // options: {
                    //     presets: ['@babel/preset-env']
                    // }
                }
            },
        ],
    },
        plugins: [
            new ESLintPlugin(
            {
                context:path.resolve(__dirname,'../src')
            }
        ),
            new HtmlWebpackPlugin({
                //模版：以public/index.html为模版创建html文件
                //特点：结构和原先html结构一样 自动引入打包输出的资源
                template:path.resolve(__dirname,'../public/index.html')
            })
        ],
    //开发服务器
    // devServer: {
    //     host:'localhost',
    //     port:'8888',
    //     open:true,//是否自动打开浏览器
    // },
    mode:"production"
}